<template>
  <div class="layui-container">
    <div class="admin-login-background">
      <div class="layui-form login-form">
        <form class="layui-form" v-on:submit.prevent>
          <div class="layui-form-item logo-title">
            <h1>开心影院用户登录</h1>
          </div>
          <div class="layui-form-item">
            <label
              class="layui-icon layui-icon-username"
              for="username"
            ></label>
            <input
              type="text"
              v-model="username"
              name="username"
              id="username"
              lay-verify="required|username"
              placeholder="用户名"
              autocomplete="off"
              class="layui-input"
              @blur="checkUserName"
            />
          </div>
          <div class="layui-form-item">
            <label
              class="layui-icon layui-icon-password"
              for="password"
            ></label>
            <input
              type="password"
              name="password"
              v-model="password"
              id="password"
              class="layui-input"
              lay-verify="required|password"
              placeholder="密码"
              autocomplete="off"
            />
          </div>
          <div class="layui-form-item">
            <label
              class="layui-icon layui-icon-password"
              for="password"
            ></label>
            <input
              type="password"
              name="vpassword"
              v-model="vpassword"
              id="vpassword"
              class="layui-input"
              lay-verify="required|password"
              placeholder="确认密码"
              autocomplete="off"
            />
          </div>
          <div class="layui-form-item">
            <label class="layui-icon layui-icon-cellphone" for="phone"></label>
            <input
              type="text"
              name="phone"
              v-model="phone"
              id="phone"
              class="layui-input"
              lay-verify="required|phone"
              placeholder="电话号码"
              autocomplete="off"
            />
          </div>
          <div class="m-captcha">
            <div
              class="
                yidun_intellisense
                yidun_intellisense--light
                yidun_intellisense--size-small
              "
            >
              <div class="yidun_intelli-control">
                <div :class="className" @click="verificationButton">
                  <i :class="cla"></i>
                  <span class="yidun_intelli-text">{{ text }}</span>
                </div>
              </div>
            </div>
          </div>
          <el-dialog
            @close="receive"
            title="请完成安全验证"
            :visible.sync="dialogbuttonVisible"
            :close-on-click-modal="true"
            :close-on-press-escape="true"
            width="18%"
          >
            <SliderVue
              ref="slider"
              :isSucc="isSucc"
              v-show="dialogbuttonVisible"
            />
          </el-dialog>
          <div class="layui-form-item">
            <button
              id="login-in"
              class="layui-btn layui-btn-normal layui-btn-fluid"
              :class="isSubmit ? '' : 'layui-btn-disabled'"
              @click="Login"
            >
              登 入
            </button>
          </div>
        </form>
        <span
          id="error"
          style="margin-left: 18px; display: inline-block; color: #0c0c0c"
          >{{ error }}</span
        >
      </div>
    </div>
    <vue-particles
      color="#7ec7fd"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="6"
      linesColor="#7ec7fd"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
  </div>
</template>

<script>
import axios from 'axios'
import SliderVue from '@/components/Slider.vue'
export default {
  name: 'VueIndex',
  components: { SliderVue },
  data () {
    return {
      dialogbuttonVisible: false, // 滑块弹出框是否显示
      tip: '向右滑动完成验证',
      username: '',
      password: '',
      vpassword: '',
      error: '',
      isSucc: false, // 滑块验证成功
      isSubmit: true, // 允许提交
      text: '点击完成验证',
      accuracy: 1,
      phone: '',
      hasUser: false // 是否有该用户
    }
  },
  computed: {
    className () {
      return this.isSucc ? 'yidun_classic-tips' : 'yidun_intelli-tips'
    },
    cla () {
      return this.isSucc ? 'el-icon-check' : ''
    }
  },
  methods: {
    // 滑块的显示和隐藏
    verificationButton () {
      if (this.isSucc) {
        this.isSucc = false
        this.text = '点击完成验证'
      }
      this.dialogbuttonVisible = true
      this.$nextTick(() => {
        this.$refs.slider.handleClick()
      })
    },
    // 关闭弹出框的回调
    receive () {
      this.$nextTick(() => {
        this.isSucc = this.$refs.slider.isSucc
        if (this.isSucc) {
          this.text = '验证成功'
        }
      })
    },
    checkUserName () {
      // 检查用户名是否存在
      axios
        .post('http://localhost:6319/user/checkUserName/' + this.username)
        .then((res) => {
          const data = res.data.info
          this.hasUser = (data !== '用户名不存在')
          this.error = data
        })
    },
    Loginin () {
      axios({
        url: 'http://localhost:6319/user/login',
        data: {
          username: this.username,
          password: this.password
        },
        method: 'post'
      }).then((res) => {
        const data = res.data.info
        if (data !== '登陆成功') {
          this.$message.error(res.data.info)
          this.error = res.data.info
          this.isSubmit = !this.isSubmit
        } else {
          this.$message(data)
        }
      })
    },
    // 登陆
    Login () {
      const userNameMsg = /^[a-zA-Z0-9_-]{4,8}$/.test(this.username)
      const passwordeMsg = /^(?=.*[a-z])(?=.*\d)[\S]{6,16}/.test(this.password)
      const phoneMsg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
          this.phone
        )
      if (this.password !== this.vpassword) {
        this.$message.error('两次密码不一致，请重新输入')
        this.error = '两次密码不一致'
        return
      }
      const flag = userNameMsg && passwordeMsg && phoneMsg
      if (flag && this.username && this.password && !this.isSucc) {
        this.verificationButton()
      }
      if (
        this.username &&
        this.password &&
        this.isSucc &&
        this.isSubmit &&
        flag &&
        this.hasUser
      ) {
        this.isSubmit = !this.isSubmit
        this.Loginin()
      }
    }
  },
  mounted () {
    //
    layui.use(['form'], function () {
      const form = layui.form
      const layer = layui.layer
      form.verify({
        username: function (value, item) {
          if (!/^[a-zA-Z0-9_-]{4,8}$/.test(value)) {
            return '用户名只能由4到8位的数字字母下划线组成'
          }
        },
        password: [
          /^(?=.*[a-z])(?=.*\d)[\S]{6,16}/,
          '密码必须6~16位长度且且必须包含字母和数字'
        ]
      })
      if (top.location != self.location) top.location = self.location
    })
  }
}
</script>

  <style scoped>
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.layui-container {
  background: #1e9fff;
}

body:after {
  content: "";
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.layui-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.admin-login-background {
  width: 360px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 40%;
  margin-left: -180px;
  margin-top: -100px;
}

.logo-title {
  text-align: center;
  letter-spacing: 2px;
  padding: 14px 0;
}

.logo-title h1 {
  color: #1e9fff;
  font-size: 25px;
  font-weight: bold;
}

.login-form {
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  padding: 14px 20px;
  box-shadow: 0 0 8px #eeeeee;
}

.login-form .layui-form-item {
  position: relative;
}

.login-form .layui-form-item label {
  position: absolute;
  left: 1px;
  top: 1px;
  width: 38px;
  line-height: 36px;
  text-align: center;
  color: #d2d2d2;
}

.login-form .layui-form-item input {
  padding-left: 36px;
}

.m-captcha {
  width: 318px;
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  padding: 8px 0;
  position: relative;
  margin: 0;
}
.yidun_intellisense--light .yidun_intelli-tips:hover {
  color: #5ba4dc;
}
.yidun_intellisense--light {
  position: relative;
}
.yidun_intellisense--light.yidun_intellisense--success .yidun_intelli-control {
  border-color: #52ccba;
  background-color: #d2f4ef;
}
.yidun_intellisense--light.yidun_intellisense--checking .yidun_intelli-control,
.yidun_intellisense--light.yidun_intellisense--loadfail .yidun_intelli-control,
.yidun_intellisense--light.yidun_intellisense--loading .yidun_intelli-control,
.yidun_intellisense--light.yidun_intellisense--success .yidun_intelli-control {
  cursor: default;
}
.yidun_intellisense--light .yidun_intelli-control {
  position: relative;
  height: 40px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid #e4e7eb;
  background-color: #f7f9fa;
  overflow: hidden;
  outline: none;
}
.yidun_intellisense--light * {
  box-sizing: border-box;
}
.yidun_intellisense--light.yidun_intellisense--error .yidun_intelli-tips,
.yidun_intellisense--light.yidun_intellisense--loadfail .yidun_intelli-tips,
.yidun_intellisense--light.yidun_intellisense--success .yidun_intelli-tips {
  display: none;
}
.yidun_intellisense--light .yidun_intelli-tips {
  text-align: center;
  color: #45494c;
}
.yidun_intellisense--light .yidun_intelli-icon {
  display: inline-block;
  position: relative;
  margin-right: 5px;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 2px 8px 1px rgb(188 196 204 / 50%);
  transition: all 0.2s linear;
}
.yidun_classic-tips .yidun_tips__icon {
  width: 17px;
  background-image: url(@/assets/icon_light.ca90af8.png);
  background-position: 0 -111px;
  background-size: 40px 1497px;
  margin-right: 5px;
  width: 12px;
  height: 12px;
  vertical-align: middle;
}
.yidun_classic-tips .yidun_intelli-text {
  line-height: 38px;
  vertical-align: middle;
}
.yidun_intelli-tips .yidun_intelli-text {
  line-height: 38px;
  vertical-align: middle;
  transition: all 0.2s linear;
}

.captcha {
  width: 60%;
  display: inline-block;
}

.captcha-img {
  display: inline-block;
  width: 34%;
  float: right;
}

.captcha-img img {
  height: 34px;
  border: 1px solid #e6e6e6;
  height: 36px;
  width: 100%;
}

#captchaPic {
  cursor: pointer;
}

.register {
  float: left;
  margin-left: 20px;
}
.fpw {
  float: right;
}
</style>
